<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数柯里化</title>
    <style>
        .container{
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 100px;
            margin: 0 auto;
            margin-top: 300px;
            width: 50%;
            border-radius: 30px;
            border: 1px #333 solid;
        }
    </style>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>

    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component{
            state={
                username:'',
                password:''
            }
            showData = (e)=>{
                e.preventDefault()
                const {username,password} = this.state
                alert(`用户名:${username},密码:${password}`)
            }
            saveData = (type) =>{ 
                /* 
                    这个地方为什么要返回一个箭头函数
                    因为 onChange={this.saveData('username')}
                        这个地方 在函数 saverData 加一个括号 就变成了 返回了一个值 给 onChange 类似于 立即执行函数,当时就执行了 saveData, onchange就会接收到saveData 的返回值
                        如果 返回了一个箭头函数 就相当于 返回了 一个 函数 给 onChange
                        区别 一个 onChange 接收了 一个函数返回值
                             一个 onChange 接收了 一个函数表达式
                */
               /* 
                        说明 这个地方比较绕 看不懂注释 就看(reactP35 中间部分)
                        简要说明 
                            代码第一次 执行的时候 react 会帮助我们 调用一次onChange中的方法 如果 我们返回的是一个普通的值 ,那么onChange方法 这时候 就会变成一个普通的值,后续 发生 change事件的
                            时候 就不回 执行任何东西 应为现在的 onchange是一个普通的值
                            如果 我们 在 第一次执行的时候 给 onchange中的方法 再次放回一个 箭头函数 那么 这个 箭头函数 就会被赋值给 onchange ,onchange现在 就是 一个 函数 ,每次 发生change事件的
                            时候 就会 调用我们onchange指定的方法中的返回的箭头函数 所以 箭头函数中接收的就是 onchange 返回的值
               */
              /* 
                    高阶函数的概念
                        高阶函数:如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数
                            1.若a函数,接收的参数是一个函数,那么a就可以成为高阶函数
                            2.若a函数,调用的返回值依然是一个函数,那么a就可以称为高阶函数(saveData 就符合这一点)
                        常见的高阶函数:Promise setTimeout arr.map()

                        函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式
              */
               /* 
                onChange 实际调用的是下边 返回的箭头函数 所以 就像上文中的手控组件一样 返回值 是在 下边这个 箭头函数中的
                此处函数的柯里化 表现就是 不能同时在最外层函数接收到 saveData中传的username 和 onchange中传的event
                注意 onchange 需要一个 函数 作为回调
               */
                return (e)=>{
                    this.setState({[type]:e.target.value})
                }
            }
            render(){
                return(
                    <form onSubmit={this.showData} className="container">
                       用户名: <input type="text" onChange={this.saveData('username')}  placeholder="请输入用户名" name="username"/> {/* */}
                       密码: <input type="password" onChange={this.saveData('password')} placeholder="请输入密码" name="password" />
                       <button onClick={this.showData}>显示输入数据</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

    <!-- 
        总结陈词
           
     -->

</body>
</html>